<template lang="html">
	<div class="vue-list" ref='myScroll'>
		<ul :style="{paddingTop: lineTopHeight +'px',paddingBottom: lineBottomHeight +'px'}" ref='mainScroll'>
			<li v-for="(item,index) in list" :class='{broadBorColor:item.checked == true}' @contextmenu="deleteItem($event,item,index)" @click.stop.prevent="toSeeThis(item,index)">
				<img v-if="item.aType == 0" src="static/image/home/chat/broadlistimg.png" class="ba_icon"/>
				<img v-else src="static/image/home/chat/broadlist.png" class="ba_icon"/>
				<div class="ba_item_w">
					<div class="ba_item_w_m">
						<div v-if="item.isRead == 0" :class="{flagNoRead: item.isRead == 0}"></div>
						<h3><div>{{item.title}}</div></h3>
						<div class="item_value" v-html='htmlReplace(item.value)'></div>
					</div>
					<div class="ba_item_w_f">
						<div>{{item.name}}</div>
						<div>{{item.time | getTimeAll}}</div>
					</div>
				</div>
			</li>
		</ul>
		<div class="delete_m_w" :style='{top:offsetY+"px",left:offsetX+"px"}' v-show='deleteShow' @click='deleteConfirm'>
			<div class='delete'>删除消息</div>
		</div>
		<div class='confirm' v-show='confirm'>
			<div class="d_tip_w">
				<div class="d_t_w_t">
					提示
				</div>
				<div class='closeConfirm' @click='closeConfrim'>

				</div>
			</div>
			<div class="confrim_tip">
				<div>
					确定删除?
				</div>
			</div>
			<div>
				<div style='text-align: right;'>
					<Button type='error' @click='triggerSee'>确定</Button>
					<Button @click.native='closeConfrim'>取消</Button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  name: "vue-list",
  props: {
    list: {
      type: Array,
      required: true,
      default: [],
      twoWays: true
    },
    height: {
      type: Number,
      default: 59
    },
    userName: {
      type: String,
      default: ""
    },
    canScroll: {
      type: Boolean,
      default: true
    },
    dispatchData: {
      type: Function
    },
    broad_show_item: {
      type: Object,
      default: false
    },
    broad_show_item_index: {
      type: Number
    }
  },
  data() {
    return {
      deleteShow: false,
      lastScrollTop: null,
      distance: 59,
      lineTopHeight: 0,
      lineBottomHeight: 0,
      canLoadmore: true,
      previewList: [],
      displayCount: 0,
      offsetX: 0,
      offsetY: 0,
      confirm: false,
      delete_item: null,
      delete_item_index: null
    };
  },
  watch: {
    list() {
      this.$forceUpdate();
    },
    broad_show_item() {
      if (!this.broad_show_item) {
        this.list.forEach((item, index) => {
          this.$set(item, "checked", false);
        });
      }
    },
    broad_show_item_index() {
      this.list.map(item => {
        this.$set(item, "checked", false);
      });
      this.$set(this.list[this.broad_show_item_index], "checked", true);
      this.$forceUpdate();
    }
  },
  methods: {
    htmlReplace(text) {
      let reg = /<[^>]+>|[&nbsp;]+/g;
      let value = text.replace(reg, "");
      return value;
    },
    toSeeThis(item, index) {
      this.deleteShow = false;
      for (let i = 0; i < this.list.length; i++) {
        this.$set(this.list[i], "checked", false);
      }
      item.isRead = 1;
      this.$set(item, "checked", true);
      this.$emit("setBroadItem", { item: item, index: index });
    },
    triggerSee() {
      this.$emit("deleteBroadItem", {
        item: this.delete_item,
        index: this.delete_item_index
      });
      this.closeConfrim();
    },
    closeConfrim() {
      this.confirm = false;
    },
    deleteConfirm() {
      this.confirm = true;
      this.deleteShow = false;
    },
    deleteItem(e, item, index) {
      this.deleteShow = true;
      this.delete_item = item;
      this.delete_item_index = index;
      let maxX = window.innerWidth - 100;
      let maxY = window.innerHeight - 40;
      this.offsetX = e.clientX > maxX ? maxX : e.clientX;
      this.offsetY = e.clientY > maxY ? maxY : e.clientY;
    },
    initData() {
      // init all data
      this._rowsInWindow = Math.ceil(this.$el.offsetHeight / this.height);
      this._above = this._rowsInWindow * 2;
      this._below = this._rowsInWindow;
      this._max = this._rowsInWindow * this.height;
    },
    handleScroll() {
      this.$emit("setFalse");
      let _scrollTop = this.$el.scrollTop;
      let _height = this.$el.querySelectorAll("ul")[0].offsetHeight;
      let _contentHeight = this.$el.offsetHeight;

      // Counts the number of rows on the current screen
      if (
        _scrollTop / this.height - Math.floor(_scrollTop / this.height) >
        0.5
      ) {
        this.displayCount = Math.ceil(_scrollTop / this.height);
      } else {
        this.displayCount = Math.floor(_scrollTop / this.height);
      }

      // if the maximum height is exceeded, reset the previewList
      if (
        this.lastScrollTop === null ||
        Math.abs(_scrollTop - this.lastScrollTop) > this._max
      ) {
        this.lastScrollTop = _scrollTop;
      } else {
        return;
      }

      // get from and to count
      let _from = parseInt(_scrollTop / this.height) - this._above;
      if (_from < 0) {
        _from = 0;
      }
      let _to = _from + this._above + this._below + this._rowsInWindow;
      if (_to > this.list.length) {
        _to = this.list.length;
      }
      this.from = _from;
      this.to = _to;

      // set top height and bottom height
      this.lineTopHeight = _from * this.height;
      this.lineBottomHeight = (this.list.length - _to) * this.height;

      // dispatch data
      if (typeof this.dispatchData === "function") {
        this.dispatchData(this);
      }

      this.resetPreviewList(_from, _to);
    },
    resetPreviewList(from, to) {
      // reset previewList
      this.previewList = [];
      for (; from < to; from++) {
        this.previewList.push(this.list[from]);
      }
    }
  },
  components: {}
};
</script>
